<template>
  <el-dialog title="创建菜单权限表" :visible.sync="visible" @close="onClose">
    <el-form :model="formData" ref="form">

      <el-form-item label="菜单名称" :label-width="formLabelWidth" required>
        <el-input v-model="formData.menuName" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="父菜单ID" :label-width="formLabelWidth" >
        <el-input v-model="formData.parentId" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="显示顺序" :label-width="formLabelWidth" >
        <el-input v-model="formData.orderNum" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="路由地址" :label-width="formLabelWidth" >
        <el-input v-model="formData.path" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="组件路径" :label-width="formLabelWidth" >
        <el-input v-model="formData.component" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="路由参数" :label-width="formLabelWidth" >
        <el-input v-model="formData.query" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="是否为外链" :label-width="formLabelWidth" >
        <el-input v-model="formData.isFrame" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="是否缓存" :label-width="formLabelWidth" >
        <el-input v-model="formData.isCache" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="菜单类型" :label-width="formLabelWidth" >
        <el-radio-group v-model="formData.menuType" style="width: 100%">
          <el-radio label="M">目录</el-radio>
          <el-radio label="C">菜单</el-radio>
          <el-radio label="F">按钮</el-radio>
        </el-radio-group>
      </el-form-item>

<!--      <el-form-item label="菜单状态" :label-width="formLabelWidth" >-->
<!--        <el-input v-model="formData.visible" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="菜单状态" :label-width="formLabelWidth" >-->
<!--        <el-input v-model="formData.status" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->

      <el-form-item label="权限标识" :label-width="formLabelWidth" >
        <el-input v-model="formData.perms" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="菜单图标" :label-width="formLabelWidth" >
        <el-input v-model="formData.icon" autocomplete="off"></el-input>
      </el-form-item>





      <el-form-item label="备注" :label-width="formLabelWidth" >
        <el-input v-model="formData.remark" autocomplete="off"></el-input>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {createSysMenu} from "@/api/sys/menu";
export default {
  name: 'SysMenuCreate',
  props: {
    visible: false, 
  },
  data() {
    return {
      formData: {
        menuId: '',

        menuName: '',

        parentId: '',

        orderNum: '',

        path: '',

        component: '',

        query: '',

        isFrame: '',

        isCache: '',

        menuType: '',

        visible: '',

        status: '',

        perms: '',

        icon: '',

        createBy: '',

        createTime: '',

        updateBy: '',

        updateTime: '',

        remark: '',

      },
      formLabelWidth: '120px'
    };
  },
  methods: {
    onClose() {
      this.$emit('update:visible', false)
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 执行表单提交操作
          // this.formData 包含了通过校验的表单数据
          createSysMenu(this.formData).then(res => {
            console.log('createSysMenu - success');
            this.$emit('submit-success');
            this.onClose();
          });
        } else {
          console.log('Form validation failed');
        }
      });
    }
  }
}
</script>

<style scoped>
</style>
